<template>
  <el-menu-item index="11" @click="isClose = !isClose"> 查看公告 </el-menu-item>
  <div class="Construction-notice-container" v-if="isClose" >
    <!-- header -->
    <div class="Construction-notice-header">
      <h2>施工公告信息</h2>
      <img class="close" src="@/images/close.png" alt="" @click="isClose = false"/>
    </div>
    <!-- body -->
    <div class="Construction-notice-body">
      <div class="Construction-notice-body-time">
        <span class="title">公告发布时间:</span>
        <!-- 2019-08-01 10:00:00 -->
        <span class="content">{{$store.announcement.time}}</span>
      </div>
      <div class="Construction-notice-body-content">
        <span class="title">公告发布内容:</span>
        <span class="content">{{$store.announcement.announcement}}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useTrafficStore } from "@/stores/traffic";

const $store = useTrafficStore();
let isClose = ref(false);


</script>

<style scoped>
.Construction-notice-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 180px;
  width: 600px;
  border: 1px solid #ccc;
  box-sizing: border-box;
  margin: 0 auto;
  border-radius: 5px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
  background-color: white;
}
/* header */
.Construction-notice-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ccc;
}
.Construction-notice-header img {
  width: 12px;
  height: 12px;
  margin-right: 20px;
  cursor: pointer;
}
.Construction-notice-header h2 {
  padding: 10px;
  color: gray;
}
/* body */
.Construction-notice-body {
  padding: 10px;
}
.Construction-notice-body-time {
  margin-bottom: 10px;
}
.Construction-notice-body .title {
  font-weight: bold;
}
.Construction-notice-body .content {
  margin-left: 10px;
  color: gray;
}
</style>
